<template>
  <div class="absolute right-0 top-20 z-10 bg-white border-l border-gray-200 flex flex-col transition-all duration-300"
       :class="isCollapsed ? 'w-20' : 'w-80'">
    <!-- 面板头部 -->
    <div class="border-b border-gray-200 flex items-center justify-between">
      <!-- 展开状态：显示标题 -->
      <div v-if="!isCollapsed" class="px-4 py-3">
        <h3 class="text-sm font-medium text-gray-900">属性面板</h3>
      </div>
      
      <!-- 收缩状态：只显示图标 -->
      <div v-else class="flex flex-col items-center py-2">
        <div class="p-2 text-gray-600">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
          </svg>
        </div>
      </div>
      
      <!-- 展开/收缩按钮 -->
      <button 
        @click="toggleCollapse"
        class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-50 transition-colors"
        :title="isCollapsed ? '展开面板' : '收缩面板'"
      >
        <svg v-if="isCollapsed" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
        </svg>
        <svg v-else class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
        </svg>
      </button>
    </div>

    <!-- 面板内容 -->
    <div v-if="!isCollapsed" class="flex-1 p-4 space-y-6 overflow-y-auto">
      <!-- 选择状态 -->
      <div class="space-y-3">
        <h4 class="text-sm font-medium text-gray-900">选择状态</h4>
        <div v-if="!selectedObject" class="bg-gray-50 rounded-lg p-3">
          <p class="text-sm text-gray-600">未选择对象</p>
          <p class="text-xs text-gray-500 mt-1">点击画布中的对象查看属性</p>
        </div>
        <div v-else class="bg-blue-50 rounded-lg p-3 border border-blue-200">
          <p class="text-sm text-blue-700 font-medium">{{ selectedObject.name }}</p>
          <p class="text-xs text-blue-600 mt-1">类型: {{ selectedObject.type }}</p>
        </div>
      </div>

      <!-- 图层管理 -->
      <div class="space-y-3">
        <h4 class="text-sm font-medium text-gray-900">图层管理</h4>
        <div class="space-y-2">
          <div 
            v-for="layer in layers" 
            :key="layer.id"
            class="flex items-center justify-between p-2 rounded border transition-colors"
            :class="layer.visible ? 'bg-blue-50 border-blue-200' : 'bg-gray-50 border-gray-200'"
          >
            <div class="flex items-center space-x-2">
              <div 
                class="w-3 h-3 rounded"
                :class="layer.color"
              ></div>
              <span class="text-sm" :class="layer.visible ? 'text-blue-700' : 'text-gray-600'">
                {{ layer.name }}
              </span>
            </div>
            <div class="flex items-center space-x-1">
              <button 
                @click="toggleLayerVisibility(layer.id)"
                class="p-1 text-gray-500 hover:text-gray-700"
              >
                <svg v-if="layer.visible" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                </svg>
                <svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 对象属性（当选择对象时显示） -->
      <div v-if="selectedObject" class="space-y-6">
        <!-- 基本属性 -->
        <div class="space-y-3">
          <h4 class="text-sm font-medium text-gray-900">基本属性</h4>
          <div class="space-y-3">
            <div>
              <label class="block text-xs font-medium text-gray-700 mb-1">名称</label>
              <input 
                v-model="selectedObject.name" 
                type="text" 
                placeholder="对象名称"
                class="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              >
            </div>
            
            <div>
              <label class="block text-xs font-medium text-gray-700 mb-1">类型</label>
              <select 
                v-model="selectedObject.type"
                class="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              >
                <option value="furniture">家具</option>
                <option value="wall">墙体</option>
                <option value="door">门</option>
                <option value="window">窗户</option>
                <option value="text">文字</option>
              </select>
            </div>
          </div>
        </div>

        <!-- 位置和尺寸 -->
        <div class="space-y-3">
          <h4 class="text-sm font-medium text-gray-900">位置和尺寸</h4>
          <div class="space-y-3">
            <div>
              <label class="block text-xs font-medium text-gray-700 mb-1">位置 (X, Y)</label>
              <div class="grid grid-cols-2 gap-2">
                <input 
                  v-model="selectedObject.x" 
                  type="number" 
                  placeholder="X"
                  class="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                >
                <input 
                  v-model="selectedObject.y" 
                  type="number" 
                  placeholder="Y"
                  class="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                >
              </div>
            </div>
            
            <div>
              <label class="block text-xs font-medium text-gray-700 mb-1">尺寸 (宽, 高)</label>
              <div class="grid grid-cols-2 gap-2">
                <input 
                  v-model="selectedObject.width" 
                  type="number" 
                  placeholder="宽度"
                  class="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                >
                <input 
                  v-model="selectedObject.height" 
                  type="number" 
                  placeholder="高度"
                  class="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                >
              </div>
            </div>

            <div>
              <label class="block text-xs font-medium text-gray-700 mb-1">旋转角度</label>
              <div class="flex items-center space-x-2">
                <input 
                  v-model="selectedObject.rotation" 
                  type="number" 
                  placeholder="角度"
                  class="flex-1 px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                >
                <span class="text-xs text-gray-500">°</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 样式属性 -->
        <div class="space-y-3">
          <h4 class="text-sm font-medium text-gray-900">样式属性</h4>
          <div class="space-y-3">
            <div>
              <label class="block text-xs font-medium text-gray-700 mb-1">颜色</label>
              <div class="flex items-center space-x-2">
                <input 
                  v-model="selectedObject.color" 
                  type="color"
                  class="w-8 h-8 border border-gray-300 rounded cursor-pointer"
                >
                <input 
                  v-model="selectedObject.color" 
                  type="text" 
                  placeholder="#000000"
                  class="flex-1 px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                >
              </div>
            </div>

            <div>
              <label class="block text-xs font-medium text-gray-700 mb-1">透明度</label>
              <div class="flex items-center space-x-2">
                <input 
                  v-model="selectedObject.opacity" 
                  type="range" 
                  min="0" 
                  max="100" 
                  step="1"
                  class="flex-1"
                >
                <span class="text-xs text-gray-600 w-12">{{ selectedObject.opacity || 100 }}%</span>
              </div>
            </div>

            <div>
              <label class="block text-xs font-medium text-gray-700 mb-1">边框宽度</label>
              <input 
                v-model="selectedObject.borderWidth" 
                type="number" 
                min="0"
                placeholder="0"
                class="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              >
            </div>
          </div>
        </div>

        <!-- 高级属性 -->
        <div class="space-y-3">
          <h4 class="text-sm font-medium text-gray-900">高级属性</h4>
          <div class="space-y-3">
            <div>
              <label class="block text-xs font-medium text-gray-700 mb-1">图层</label>
              <select 
                v-model="selectedObject.layerId"
                class="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              >
                <option v-for="layer in layers" :key="layer.id" :value="layer.id">
                  {{ layer.name }}
                </option>
              </select>
            </div>

            <div>
              <label class="block text-xs font-medium text-gray-700 mb-1">锁定状态</label>
              <div class="flex items-center space-x-2">
                <input 
                  v-model="selectedObject.locked" 
                  type="checkbox"
                  class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                >
                <span class="text-sm text-gray-700">锁定对象</span>
              </div>
            </div>

            <div>
              <label class="block text-xs font-medium text-gray-700 mb-1">可见性</label>
              <div class="flex items-center space-x-2">
                <input 
                  v-model="selectedObject.visible" 
                  type="checkbox"
                  class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                >
                <span class="text-sm text-gray-700">显示对象</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="space-y-2 pt-4 border-t border-gray-200">
          <button 
            @click="duplicateObject"
            class="w-full px-3 py-2 text-sm bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
          >
            复制对象
          </button>
          <button 
            @click="deleteObject"
            class="w-full px-3 py-2 text-sm bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors"
          >
            删除对象
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useSelectionStore, useLayerStore, usePanelStore } from '@/stores'

// Pinia Stores
const selectionStore = useSelectionStore()
const layerStore = useLayerStore()
const panelStore = usePanelStore()

// 从 store 获取面板状态
const isCollapsed = computed(() => panelStore.rightPanelCollapsed)

// 计算属性 - 从Pinia获取数据
const selectedObject = computed(() => {
  const selected = selectionStore.selectedObjects
  return selected.length > 0 ? selected[0] : null
})

const layers = computed(() => layerStore.layers)

// 方法
const toggleLayerVisibility = (layerId) => {
  layerStore.toggleLayerVisibility(layerId)
  console.log('切换图层可见性:', layerId)
}

const duplicateObject = () => {
  if (selectedObject.value) {
    console.log('复制对象:', selectedObject.value)
    // TODO: 实现对象复制逻辑
  }
}

const deleteObject = () => {
  if (selectedObject.value) {
    console.log('删除对象:', selectedObject.value)
    // TODO: 实现对象删除逻辑
  }
}

// 更新对象属性
const updateObjectProperty = (property, value) => {
  if (selectedObject.value) {
    selectedObject.value[property] = value
    console.log('更新对象属性:', property, value)
  }
}

const toggleCollapse = () => {
  panelStore.toggleRightPanel()
}
</script>

<style scoped>
/* 右侧面板样式 */
</style>
